
import { selectConfigByKeyGetWatermark } from '@/api/system/config'
const watermark = {}

const setWatermark = (sort, userName, email, phone, sysName, sourceBody, fontSize, color, density, angle, opacity) => {
  const id = 'watermark'

  if (!sort) {
    sort = ['用户名称', '用户邮箱', '手机号码', '公司名称', '当前时间']
  }

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  const can = document.createElement('canvas')
  var _density = density || 1
  can.height = 300 * _density
  can.width = 300 * _density

  const cans = can.getContext('2d')
  cans.rotate(+(angle) * Math.PI / 180)
  cans.font = fontSize ? fontSize + ' Vedana' : '15px Vedana'
  cans.fillStyle = color || 'rgba(0, 0, 0, .5)'
  cans.textAlign = 'center'
  cans.textBaseline = 'Middle'
  var sortNum = 10
  var canWidth = 3.5
  var canHeight = 3

  sort = sort.split(',')
  sort.forEach((item, index) => {
    if (index !== 0) { sortNum = (30 * index) + 10 }
    if (userName && userName !== '' && item === '用户名称') {
      cans.fillText(userName, can.width / canWidth, can.height / canHeight + sortNum)
    }
    if (email && email !== '' && item === '用户邮箱') {
      cans.fillText(email, can.width / canWidth, can.height / canHeight + sortNum)
    }
    if (phone && phone !== '' && item === '手机号码') {
      cans.fillText(phone, can.width / canWidth, can.height / canHeight + sortNum)
    }
    if (sysName && sysName !== '' && item === '公司名称') {
      cans.fillText(sysName, can.width / canWidth, can.height / canHeight + sortNum)
    }
    if (item === '当前时间') {
      cans.fillText(timeFormate(), can.width / canWidth, can.height / canHeight + sortNum)
    }
  })

  const water_div = document.createElement('div')
  water_div.id = id
  water_div.style.pointerEvents = 'none'
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  water_div.style.opacity = opacity
  if (sourceBody) {
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    sourceBody.appendChild(water_div)
  } else {
    water_div.style.top = '0px'
    water_div.style.left = '0px'
    water_div.style.position = 'fixed'
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    water_div.style.zIndex = '100000'
    // water_div.style.width = document.documentElement.clientWidth + 'px'
    // water_div.style.height = document.documentElement.clientHeight + 'px'
    document.body.appendChild(water_div)
  }

  return id
}

const timeFormate = () => {
  var currentData = new Date()
  const year = currentData.getFullYear()
  const month = currentData.getMonth() + 1 < 10 ? '0' + (currentData.getMonth() + 1) : currentData.getMonth() + 1
  const date = currentData.getDate() < 10 ? '0' + currentData.getDate() : currentData.getDate()
  const hh = currentData.getHours() < 10 ? '0' + currentData.getHours() : currentData.getHours()
  const mm = currentData.getMinutes() < 10 ? '0' + currentData.getMinutes() : currentData.getMinutes()
  const ss = currentData.getSeconds() < 10 ? '0' + currentData.getSeconds() : currentData.getSeconds()
  return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
}

/**
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 *  @fontSize ==  字体大小
 *  @color == 水印字体颜色
 *  @density == 密度
 *  @angle == 倾斜度
 * */

watermark.set = (userName, email, phone, sourceBody) => {
  selectConfigByKeyGetWatermark('system_watermark').then(res => {
    // fontSize, color, density, angle 取自系统配置
    console.log(res.data.configValue, '开关')
    if (res.code === 200 && res.data.configValue === 'true') {
      console.log(res.data.sysConfigList, '参数')
      var sysConfigList = res.data.sysConfigList || []
      var sort = sysConfigList.find(item => item.configKey === 'pc') || {}
      var fontSize_mark = sysConfigList.find(item => item.configKey === 'fontSize') || ''
      var color_mark = sysConfigList.find(item => item.configKey === 'color') || ''
      var density_mark = sysConfigList.find(item => item.configKey === 'density') || ''
      var angle_mark = sysConfigList.find(item => item.configKey === 'angle') || ''
      var sysInfo = sysConfigList.find(item => item.configKey === 'productName') || ''
      var water_opacity = sysConfigList.find(item => item.configKey === 'opacity') || '0.09'
      // console.log(fontSize_mark, color_mark, density_mark, angle_mark)
      let id = setWatermark(sort.configValue, userName, email, phone, sysInfo.configValue, sourceBody, fontSize_mark.configValue, color_mark.configValue, density_mark.configValue, angle_mark.configValue, water_opacity.configValue)
      var timer = setInterval(() => {
        id = setWatermark(sort.configValue, userName, email, phone, sysInfo.configValue, sourceBody, fontSize_mark.configValue, color_mark.configValue, density_mark.configValue, angle_mark.configValue, water_opacity.configValue)
        if (document.getElementById(id) === null) {
          id = setWatermark(sort.configValue, userName, email, phone, sysInfo.configValue, sourceBody, fontSize_mark.configValue, color_mark.configValue, density_mark.configValue, angle_mark.configValue, water_opacity.configValue)
        }
      }, 60000)
      window.onresize = () => {
        clearInterval(timer)
        timer = setInterval(() => {
          setWatermark(sort.configValue, userName, email, phone, sysInfo.configValue, sourceBody, fontSize_mark.configValue, color_mark.configValue, density_mark.configValue, angle_mark.configValue, water_opacity.configValue)
        }, 60000)
      }
    }
  })
}

export default watermark
